﻿@page
@model FytSoa.Web.Pages.FytAdmin.Shop.ActivityGoodsModel
@{
    ViewData["Title"] = "活动管理商品";
    Layout = "~/Pages/FytAdmin/_Layout.cshtml";
}
<div id="app">
    <div class="list-wall">
        <div class="layui-form list-search">
            <div class="layui-inline">
                <input class="layui-input" id="key" autocomplete="off" placeholder="请输入关键字查询">
            </div>
            <div class="layui-inline">
                <select id="type" lay-search="">
                    <option value="0">商品分类</option>
                    <option :value="it.id" v-for="it in list">{{it.title}}</option>
                </select>
            </div>
            <div class="layui-inline">
                <select id="attr" lay-search="">
                    <option value="">商品属性</option>
                    <option value="IsTop">推荐</option>
                    <option value="IsHot">热点</option>
                    <option value="IsDelivery">包邮</option>
                    <option value="IsCoupon">优惠券使用</option>
                    <option value="IsDel">是否删除</option>
                    <option value="IsAudit">上架</option>
                    <option value="IsReturn">退换货</option>
                    <option value="IsFenXiao">分销</option>
                    <option value="IsDisCount">会员折扣</option>
                </select>
            </div>
            <div class="layui-inline">
                <input type="checkbox" lay-filter="links" lay-skin="switch" lay-text="显示关联商品|所有商品">
            </div>
            <button type="button" class="layui-btn layui-btn-sm" data-type="toolSearch"><i class="layui-icon layui-icon-search"></i> 搜索</button>
        </div>
        <table class="layui-hide" id="tablist" lay-filter="tool"></table>
    </div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            list: [],
            isgl:0
        }
    });
    layui.config({
        base: '/themes/js/modules/'
    }).use(['layer', 'jquery', 'common', 'table', 'form'],
        function () {
            var layer = layui.layer,
                table = layui.table,
                $ = layui.jquery,
                form = layui.form;
            os = layui.common;
            var actguid =  os.getUrlParam('guid');
            table.render({
                elem: '#tablist',
                headers: os.getToken(),
                url: '/api/shop/activity/goods/list',
                cols: [
                    [
                        {field: 'goodsName', title: '商品名称', fixed: 'left'},
                        { field: 'salePrice', width: 80, title: '价格' },
                        { field: 'activityMoney', width: 120, edit: 'text', title: '<i class="layui-icon layui-icon-rmb"></i> 活动价格' },
                        { field: 'kcSum', width: 80, title: '库存' },
                        { field: 'limits', width: 120, edit: 'text', title: '<i class="layui-icon layui-icon-cart"></i> 限购数量' },
                        { field: 'sort', width: 80, edit: 'text', title: '<i class="layui-icon layui-icon-more-vertical"></i> 排序' },
                        {
                            field: 'isAudit', width: 100, title: '上架状态', templet: function (data) {
                                if (data.isAudit) {
                                    return '<span class="layui-badge layui-bg-blue">上架</span>';
                                } else {
                                    return '<span class="layui-badge">下架</span>';
                                }
                            }
                        },
                        {
                            field: 'isAudit', width: 200, title: '属性', templet: function (data) {
                                var str = '';
                                if (data.isTop) {
                                    str += '<span class="layui-badge layui-bg-blue">推荐</span>';
                                } if (data.isRed) {
                                    str += '<span class="layui-badge layui-bg-green">热销</span>';
                                } if (data.isDelivery) {
                                    str += '<span class="layui-badge layui-bg-cyan">包邮</span>';
                                } if (data.isDel) {
                                    str += '<span class="layui-badge">删除</span>';
                                } if (data.isFenXiao) {
                                    str += '<span class="layui-badge layui-bg-orange">分销</span>';
                                } if (data.isDisCount) {
                                    str += '<span class="layui-badge layui-bg-black">会员折扣</span>';
                                }
                                return str;
                            }
                        },                        
                        {
                            width: 120, title: '操作', templet: function (data) {
                                var name = '确定关联';
                                if (data.activityGuid) {
                                    name ='<span style="color:#FF5722">取消关联</span>'
                                }
                                return '<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="link"><i class="layui-icon layui-icon-senior"></i> ' + name+'</a>';
                            }
                        }
                    ]
                ],
                page: true,
                id: 'tables',
                parseData: function (res) {
                    return {
                        "code": res.statusCode === 200 ? 0 : res.statusCode,
                        "msg": res.message,
                        "count": res.data.totalItems,
                        "data": res.data.items
                    };
                }
            });
            fun = {
                init: function () {
                    os.ajax('api/shop/column/select', { id: 2 }, function (res) {
                        if (res.statusCode === 200) {
                            vm.list = res.data; console.log(vm.list);
                            vm.$nextTick(function () {
                                form.render('select');
                            });
                        } else {
                            os.error(res.message);
                        }
                    });
                }
            };
            fun.init();
            form.on('switch(links)', function (data) {
                vm.isgl = data.elem.checked?1:0;
            }); 
            active = {
                reload: function () {
                    table.reload('tables',
                        {
                            page: {
                                curr: 1
                            },
                            where: {
                                id: $('#type').val(),
                                key: $('#key').val(),
                                where: $('#attr').val(),
                                status: vm.isgl
                            }
                        });
                },
                toolSearch: function () {
                    active.reload();
                }            
            };
            $('.list-search .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
            //监听工具条
            table.on('tool(tool)', function (obj) {
                var data = obj.data;
                if (obj.event === 'link') {
                    os.load();
                    os.ajax('api/shop/activity/linkgoods',
                        {
                            guid: data.activityGoodsGuid,
                            activityGuid: actguid,
                            goodGuid: data.guid,
                            activityMoney: data.activityMoney,
                            limits: data.limits,
                            sort:data.sort
                        }, function (res) {
                            if (res.statusCode === 200) {
                                os.success('操作成功');
                                active.reload();
                                os.loadClose();
                            } else {
                                os.error(res.message);
                                os.loadClose();
                            }
                        });
                }
                
            });
        });
</script>